
<template>
  <div>
    <van-tabs
      v-model="active"
      color="#face15"
      aria-selected="#fff"
      line-width='33.3%'
      background="#191923"
      title-active-color='#fff'
    >
      <van-tab :title="`联系人 ${userTotal}`">
        <van-list
          v-model="loading"
          :finished="finished"
          finished-text="没有更多了"
          @load="onLoad(0)"
        >
          <van-cell
            class="chatList-item"
            v-for="user in users"
            :key="user.userid"
            @click=" $router.push({name: 'user',params: {userid: user.userid }})"
          >
            <van-image
              slot="icon"
              round
              width="55"
              height="55"
              style="margin-right: 10px;"
              :src="user.baseUrl+user.photo"
            />
            <span
              style="color: #e8e7ec;font-size:18px"
              slot="title"
            >{{ user.name }}</span>
          </van-cell>
        </van-list>

      </van-tab>
      <van-tab :title="`留言 ${messageTotal}`">
        <van-list
          v-model="loading2"
          :finished="finished2"
          finished-text="没有更多了"
          @load="onLoad(1)"
        >

          <div
            @touchstart='onDeleteMessage(message.chatUserid)'
            @touchend='clearTimeOut'
            v-for="(message) in messages"
            :key="message._id"
          >
            <van-cell
              class="chatList-item"
              @click="$router.push({name:'userChat',params:{
             chatUserid: message.chatUserid
            }})"
            >
              <van-image
                slot="icon"
                round
                width="55"
                height="55"
                style="margin-right: 10px;"
                :src="message.baseUrl+message.chatPhoto"
              />
              <div
                v-if="message.isNewMessage"
                class="isNew"
              > {{message.isNewMessage}} </div>
              <span
                style="color: #e8e7ec;font-size:16px"
                slot="title"
              >{{ message.chatName }}</span>
              <div slot="label">
                <div style="messageInfo">
                  <div class="content">
                    最新：{{ message.content[message.content.length-1].content.substr(0,40) }}
                  </div>
                  <div class="publictime">
                    {{ message.content[message.content.length-1].publictime }}
                  </div>
                </div>
              </div>
            </van-cell>
            <div style="heigh:1px width:100%"></div>
          </div>
        </van-list>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'

import globalBus from '@/utils/global-bus'
import { getuserfollow, getUserMessage, removeUserMessage } from '@/api/user'
export default {
  name: 'ArticleList',
  components: {},
  data () {
    return {
      selfInfo: {},
      users: [],
      list: [],
      loading: false,
      finished: true,
      loading2: false,
      finished2: true,
      userPage: 0, // 页码
      videoPage: 0, // 页码
      active: 1,
      userTotal: 0,
      isCommentShow: false,
      message: '',
      currentChatPage: {
        baseUrl: '',
        chatPhoto: '',
        content: []
      },
      isLongPress: undefined
    }
  },
  watch: {},
  computed: {
    ...mapGetters(['messages', 'messageTotal'])
  },
  created () {
    globalBus.$on('message-update', () => {
      this.userPage = 0 // 页码
      this.loadUser()
    })
    this.loadUser()
  },
  mounted: function () {
  },
  activated () {
    this.userPage = 0 // 页码
    this.loadUser()
  },
  methods: {
    async loadUser () {
      try {
        const res = await getuserfollow(this.$store.state.user.userid, ++this.userPage)
        const user = res.data.data
        this.users = user
        this.userTotal = res.data.meta.msg
        const res2 = await getUserMessage(this.$store.state.user.userid)
        // 按时间排序
        const messages = res2.data.data.messages.sort(function (a, b) {
          const value1 = new Date(a.content[a.content.length - 1].publictime)
          const value2 = new Date(b.content[b.content.length - 1].publictime)
          return value2 - value1
        })
        this.$store.dispatch('message/initMessage', messages)
        this.$store.dispatch('message/setMessageTotal', res2.data.meta.msg)
        this.currentChatPage = res2.data.data.messages[0]
        this.finished = false
        this.finished2 = true
      } catch (error) {
        this.$store.commit('setUser', null)
        return this.$router.push('/login')
      }
    },
    async getUserSearch () {
      const res2 = await getuserfollow(this.$store.state.user.userid, ++this.userPage)
      const users = res2.data.data
      this.loading = false
      if (users.length === 0) {
        this.finished = true
      } else {
        this.users.push(...users)
      }
    },
    async getMessage () {
      const res2 = await getUserMessage(this.$store.state.user.userid)
      const messages = res2.data.data.messages
      this.loading2 = false
      if (messages.length === 0) {
        this.finished2 = true
      } else {
        this.messages.push(...messages)
      }
    },
    onLoad (value) {
      if (value) {
      } else {
        this.getUserSearch()
      }
    },
    onDeleteMessage (chatUserid) {
      this.isLongPress = setTimeout(() => {
        this.$dialog
          .confirm({
            title: '是否删除消息',
            color: '#000'
          })
          .then(async () => {
            await removeUserMessage(this.$store.state.user.userid, { chatUserid })
            this.loadUser()
          })
          .catch(() => {
            // 取消执行这里
          })
      }, 500)
    },
    clearTimeOut () {
      clearTimeout(this.isLongPress)
    }
  }
}

</script>

<style scoped  lang="less">
.van-search__content {
  background-color: #3a3a44;
  .van-cell {
    color: #3a3a44;
  }
}
.van-search {
  .van-cell {
    background-color: #3a3a44 !important;
  }
}
.videoWrap {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: center;
  .videoPreview {
    width: 33.3%;
    height: 150px;
    position: relative;
    .loveNum {
      font-size: 18px;
      position: absolute;
      z-index: 9999;
      bottom: 3px;
      right: 3px;
    }
    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  }
}
.content {
  font-size: 12px;
  margin: 0;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.chatList-item {
  .van-cell {
    padding-bottom: 0px !important;
  }
}
.like-container {
  background-color: #face15;
  position: relative;
  top: 30px;
  width: 10px;
  height: 10px;
  border-radius: 10px;
}
p {
  margin: 0px;
}
.chat-container {
  position: absolute;
  width: 100%;
  height: 100%;
  padding: 46px 0 50px 0;
  top: 0;
  left: 0;
  box-sizing: border-box;
  background: #f5f5f6;
  .message-list {
    height: 100%;
    overflow-y: scroll;
    .message-item {
      display: flex;
      flex-flow: row nowrap;
      align-items: flex-start;
      padding: 10px;
      .msg-wrap {
        word-break: break-all;
        word-wrap: break-word;
      }
      .title {
        display: table;
        background: #e0effb;
        border-radius: 6px;
        font-size: 14px;
        padding: 10px 10px;
        margin-right: 45px;
        color: #333;
      }
      .avatar {
        width: 40px;
        height: 40px;
        margin-right: 5px;
      }
    }
    .reverse {
      flex-direction: row-reverse;
      .msg-wrap {
        display: flex;
        flex-direction: row-reverse;
        .title {
          margin-right: 5px;
          margin-left: 45px;
        }
      }
    }
  }

  .send-message {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: #f5f5f6 !important;
  }
}
.chat-container {
  .van-cell {
    background: #fff !important;
  }
}
.time {
  width: 100%;
}
.isNew {
  background-color: rgb(250, 206, 21);
  width: 20px;
  height: 20px;
  border-radius: 20px;
  position: absolute;
  top: 50%;
  text-align: center;
  line-height: 20px;
  transform: translateY(-50%);
  right: 10px;
  color: #fff;
}

.messageInfo {
  color: #ccc;
  font-size: 15px;
  position: relative;
  width: 100%;
  .content {
    position: absolute;
    color: #62656c;
    width: 50px;
    right: 0;
  }
  .publictime {
    position: absolute;
    color: #62656c;
    width: 50px;
    right: 0;
  }
}
</style>
